<template>
  <view>
    <view v-for="(item, index) in feeList" :key="item.key" class="form-fee-content">
      <insureCard :insureType="insureType" />
    </view>
    <view class="ve-form-item-btn" v-if="!feeList.length" :class="[feeList.length ? 've-form-item-btn-have-data' : '']" @click="handleAdd">
      <ve-icon name="plus" size="30"></ve-icon>
      <span class="ve-form-item-btn-text">{{ addBtnText }}</span>
    </view>
  </view>
</template>

<script setup lang="ts">
  import insureCard from '../../car-insure/components/insure-card.vue'

  const props = defineProps({
    title: {
      type: String,
      default: '',
    },
    insureType:String,
    addBtnText: {
      type: String,
      default: '',
    },
    feeList: {
      type: Array<any>,
      default: () => [],
    },
    totalFee: {
      type: [String, Number],
      default: '',
    },
    remoteSelectData: Object,
  })

  const emit = defineEmits(['handleAdd', 'handleDelete', 'handleBlur'])

  // 新增
  const handleAdd = () => {
    emit('handleAdd')
  }

  // 删除
  const handleDelete = (e) => {
    emit('handleDelete', e)
  }
  // 失去焦点
  const handleBlur = () => {
    console.log(props.feeList)
    emit('handleBlur')
  }

  const uploadChangefile = (list) => {
    // this.fileList = list
    console.log('🐳 log：', list)
  }
</script>

<style lang="scss" scoped>
  .ve-form-item-disabled {
    background: #f6f8f9;
    padding-left: 32rpx;
    padding-right: 32rpx;
    color: #9ea5bb;
    .ve-form-item__body__right__content__unit {
      color: #9ea5bb;
    }

    &.leftLayout {
      .ve-form-item__body__right__content__slot {
        text-align: right;
      }
    }
  }
  .ve-form-item-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 88rpx;
    background: #f3f7ff;
    border-radius: 4rpx 4rpx 4rpx 4rpx;
    border: 2rpx solid #3072f6;
    .ve-form-item-btn-text {
      font-size: 30rpx;
      font-weight: 400;
      color: #3072f6;
      margin-left: 18rpx;
    }
  }
  .ve-form-item-btn-have-data {
    margin-top: 32rpx;
  }
  .form-fee-content {
    width: 654rpx;
    background: #f7f8fa;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    opacity: 1;
    margin-bottom: 32rpx;
    .form-fee-content-title {
      height: 88rpx;
      box-sizing: border-box;
      padding: 0 24rpx 0 24rpx;
      background: #f0f1f3;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .form-fee-content-title-text {
      font-size: 30rpx;
      font-family: PingFang SC-Semibold, PingFang SC;
      font-weight: 600;
      color: #191c27;
    }
    .form-fee-content-content {
      box-sizing: border-box;
      padding: 0 24rpx 0 24rpx;
    }
  }
</style>
